<script lang="ts" setup>
</script>

<template>
  <view>
    <view class="text-center font-size-[32rpx]">
      签到情况
    </view>
    <view class="mt-3">
      <view class="font-size-[24rpx] color-[#999]">
        已签到(3)
      </view>
      <view class="flex flex-wrap">
        <template v-for="(item, index) in 3" :key="index">
          <view v-if="index % 4 != 0" class="line-col mt-2" />
          <view class="user-item mt-2">
            李豫卓
          </view>
        </template>
      </view>
    </view>
    <view class="mb-2 mt-5">
      <view class="font-size-[24rpx] color-[#999]">
        未签到(7)
      </view>
      <view class="flex flex-wrap">
        <template v-for="(item, index) in 8" :key="index">
          <view v-if="index % 4 != 0" class="line-col mt-2" />
          <view class="user-item mt-2">
            李豫卓
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
	.line {
		height: 1px;
		background: #ddd;
		transform: scaleY(0.5);
	}

	.line-col {
		width: 1px;
		background: #ddd;
		transform: scaleX(0.5);
		height: 40rpx;
	}

	.user-item {
		width: calc(25% - 1px);
		text-align: center;
		font-size: 30rpx;
	}
</style>
